<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>测评结果 - 教师测评系统</title>
    <!-- Bootstrap 5 CSS -->
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link th:href="@{/static/css/bootstrap-icons.css}" rel="stylesheet">

    <style>
        :root {
          --primary-color: #3f6ad8;
          --primary-light: rgba(63, 106, 216, 0.1);
          --primary-dark: #2952bb;
          --primary-gradient: linear-gradient(135deg, #3f6ad8 0%, #2952bb 100%);
          --secondary-color: #6c757d;
          --success-color: #2dce89;
          --success-light: rgba(45, 206, 137, 0.1);
          --warning-color: #fb6340;
          --warning-light: rgba(251, 99, 64, 0.1);
          --danger-color: #f5365c;
          --light-color: #f8f9fe;
          --dark-color: #344767;
          --text-muted: #8a94a6;
          --border-radius: 16px;
          --card-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
          --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

    body {
          font-family: 'Noto Sans SC', 'Poppins', sans-serif;
          background-color: var(--light-color);
          background-image:
            radial-gradient(circle at 5% 10%, rgba(63, 106, 216, 0.05) 0%, transparent 15%),
            radial-gradient(circle at 95% 90%, rgba(63, 106, 216, 0.05) 0%, transparent 15%);
          padding-bottom: 80px; /* 为底部导航栏预留空间 */
          color: var(--dark-color);
          min-height: 100vh;
        }

        /* 导航栏 */
    .nav-bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
          height: 66px;
      background-color: #fff;
          box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.07);
      display: flex;
      z-index: 1000;
          border-radius: 24px 24px 0 0;
          padding: 0 10px;
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
          color: var(--text-muted);
      text-decoration: none;
      font-size: 12px;
      line-height: 1;
          transition: all 0.3s ease;
          position: relative;
          font-weight: 500;
          padding: 12px 0;
    }

    .nav-item.active {
          color: var(--primary-color);
        }

        .nav-item.active:after {
          content: '';
          position: absolute;
          bottom: 8px;
          width: 24px;
          height: 3px;
          background-color: var(--primary-color);
          border-radius: 3px;
        }

    .nav-icon {
          font-size: 24px;
          margin-bottom: 5px;
    }

        /* 页面容器 */
    .page-container {
          padding-top: 25px;
          padding-bottom: 30px;
          max-width: 540px;
          margin: 0 auto;
        }

        /* 卡片样式 */
    .card {
          border-radius: var(--border-radius);
          box-shadow: var(--card-shadow);
          margin-bottom: 24px;
      border: none;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          overflow: hidden;
          background-color: #fff;
        }

        .card:hover {
          transform: translateY(-5px);
          box-shadow: var(--hover-shadow);
        }

        .card-body {
          padding: 24px;
        }

        /* 返回按钮 */
        .back-button {
          display: inline-flex;
          align-items: center;
          text-decoration: none;
          color: var(--primary-color);
          font-weight: 500;
          padding: 8px 16px;
          border-radius: 50px;
          transition: all 0.3s ease;
          margin-bottom: 20px;
          background-color: var(--primary-light);
        }

        .back-button:hover {
          background-color: rgba(63, 106, 216, 0.2);
          transform: translateX(-5px);
        }

        .back-button i {
          margin-right: 8px;
        }

        /* 评估卡片 */
        .assessment-card {
          border-radius: var(--border-radius);
          padding: 18px;
          margin-bottom: 16px;
          background-color: #fff;
          box-shadow: var(--card-shadow);
          transition: all 0.3s ease;
        }

        .assessment-card:hover {
          transform: translateY(-3px);
          box-shadow: var(--hover-shadow);
        }

        .score-indicator {
          width: 40px;
          height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
          color: #fff;
          font-size: 18px;
          margin-right: 15px;
        }

        .score-excellent {
          background: linear-gradient(135deg, #2dce89 0%, #26b977 100%);
          box-shadow: 0 5px 15px rgba(45, 206, 137, 0.2);
        }

        .score-good {
          background: linear-gradient(135deg, #3f6ad8 0%, #2952bb 100%);
          box-shadow: 0 5px 15px rgba(63, 106, 216, 0.2);
        }

        .score-average {
          background: linear-gradient(135deg, #fb6340 0%, #f55123 100%);
          box-shadow: 0 5px 15px rgba(251, 99, 64, 0.2);
        }

        .score-poor {
          background: linear-gradient(135deg, #f5365c 0%, #d82c50 100%);
          box-shadow: 0 5px 15px rgba(245, 54, 92, 0.2);
        }

        .category-title {
          font-weight: 600;
          font-size: 16px;
          margin-bottom: 3px;
        }

        .category-desc {
          color: var(--text-muted);
          font-size: 13px;
        }

        /* 加载动画 */
        .spinner-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(255, 255, 255, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
        }

        .spinner-container {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .spinner-border {
          color: var(--primary-color);
          width: 3rem;
          height: 3rem;
        }

        .spinner-text {
          color: var(--primary-color);
          font-weight: 500;
          margin-top: 15px;
        }

        /* 无数据状态 */
        .no-data-container {
          display: flex;
          flex-direction: column;
      align-items: center;
          justify-content: center;
          text-align: center;
          padding: 40px 0;
        }

        .no-data-icon {
          font-size: 80px;
          color: #e2e5eb;
          margin-bottom: 20px;
        }

        .no-data-text {
          color: var(--text-muted);
          font-weight: 500;
          font-size: 16px;
        }

        /* 动画效果 */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .fadeInUp {
          animation: fadeInUp 0.6s ease forwards;
        }

        /* 结果摘要卡片 */
        .summary-card {
          background: var(--primary-gradient);
          color: #fff;
          border-radius: var(--border-radius);
          padding: 24px;
          margin-bottom: 30px;
          position: relative;
          overflow: hidden;
        }

        .summary-card::before {
          content: '';
          position: absolute;
          top: -40px;
          right: -40px;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
        }

        .summary-card::after {
          content: '';
      position: absolute;
          bottom: -50px;
          left: -50px;
          width: 150px;
          height: 150px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
        }

        .summary-title {
          font-weight: 600;
          font-size: 18px;
          margin-bottom: 15px;
          position: relative;
          z-index: 1;
        }

        .summary-value {
          font-size: 36px;
          font-weight: 700;
          margin-bottom: 5px;
          position: relative;
          z-index: 1;
        }

        .summary-label {
          font-size: 14px;
          opacity: 0.8;
          position: relative;
          z-index: 1;
        }

        /* 按评分分类的样式 */
        .category-badge {
          font-size: 11px;
          padding: 4px 10px;
          border-radius: 20px;
          font-weight: 500;
          margin-left: 8px;
        }

        .badge-excellent {
          background-color: var(--success-light);
          color: var(--success-color);
        }

        .badge-good {
          background-color: var(--primary-light);
          color: var(--primary-color);
        }

        .badge-average {
          background-color: var(--warning-light);
          color: var(--warning-color);
        }

        .badge-poor {
          background-color: rgba(245, 54, 92, 0.1);
          color: var(--danger-color);
        }

        /* 警告消息 */
        .alert-modern {
          border-left: 4px solid;
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 24px;
        }

        .alert-warning-modern {
          background-color: var(--warning-light);
          border-left-color: var(--warning-color);
          color: #c85421;
        }

        .alert-error-modern {
          background-color: rgba(245, 54, 92, 0.1);
          border-left-color: var(--danger-color);
          color: #d82c50;
        }
    </style>
</head>
<body>
<div class="container page-container">
    <!-- 返回按钮 -->
    <a href="javascript:history.back()" class="back-button fadeInUp" style="animation-delay: 0.1s">
        <i class="bi bi-arrow-left"></i> 返回
    </a>

    <!-- 当前周期 -->
    <div class="card mb-4 fadeInUp" style="animation-delay: 0.2s" th:if="${currentPeriod != null}">
        <div class="card-body p-4">
            <div class="d-flex align-items-center mb-2">
                <i class="bi bi-calendar-check me-2" style="color: var(--primary-color); font-size: 24px;"></i>
                <h5 class="mb-0 fw-bold">当前评测周期</h5>
            </div>
            <p class="mb-0 text-muted">
                <span th:text="${currentPeriod.name}">2023学年第一学期</span>
                <span class="ms-2 small text-muted"
                      th:text="${currentPeriod.startTimeStr} + ' 至 ' + ${currentPeriod.endTimeStr}">
                    2023-09-01 至 2023-12-31
                </span>
            </p>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="spinner-overlay" id="loadingSpinner">
        <div class="spinner-container">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-text">加载评测结果中...</div>
        </div>
    </div>

    <!-- 结果展示区域 -->
    <div id="resultContent"></div>

    <!-- 警告信息模板 -->
    <div id="errorAlertTemplate" style="display: none;">
        <div class="alert-modern alert-error-modern mb-4 fadeInUp" style="animation-delay: 0.3s">
            <div class="d-flex align-items-center">
                <i class="bi bi-exclamation-circle me-3" style="font-size: 24px;"></i>
                <div>
                    <h6 class="mb-1 fw-bold">加载失败</h6>
                    <p class="mb-0 small">无法加载评测结果，请稍后重试或联系管理员。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 无数据状态模板 -->
    <div id="noDataTemplate" style="display: none;">
        <div class="no-data-container fadeInUp" style="animation-delay: 0.3s">
            <i class="bi bi-clipboard-x no-data-icon"></i>
            <div class="no-data-text">暂无评测结果数据</div>
            <p class="text-muted small mt-2">当前评测周期尚无您的评测结果数据</p>
        </div>
    </div>
</div>

<!-- 底部导航栏 -->
<div class="nav-bottom">
    <a href="/h5/index" class="nav-item">
        <div class="nav-icon">
            <i class="bi bi-house-door"></i>
        </div>
        <div>首页</div>
    </a>
    <a href="/h5/my" class="nav-item">
        <div class="nav-icon">
            <i class="bi bi-person"></i>
        </div>
        <div>我的</div>
    </a>
</div>

<!-- jQuery -->
<script th:src="@{/static/js/jquery-3.6.0.min.js}"></script>
<!-- Bootstrap JS -->
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>

<script th:inline="javascript">
    $(document).ready(function() {
        // 如果没有当前周期，显示暂无数据
        const periodId = /*[[${currentPeriod != null ? currentPeriod.id : 0}]]*/'0';
        if (periodId == 0) {
            showNoDataMessage();
          return;
        }

        // 加载评测结果数据
        loadAssessmentResults(periodId);
    });

    // 加载评测结果
    function loadAssessmentResults(periodId) {
        $.ajax({
            url: '/api/assessment/results?periodId=' + periodId,
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token')
          },
          success: function(resp) {
                $('#loadingSpinner').hide();
            if (resp.code === 200) {
                    if (resp.data && resp.data.length > 0) {
                        displayResults(resp.data);
                    } else {
                        showNoDataMessage();
                    }
            } else {
                    showErrorAlert(resp.msg || '加载评测结果失败');
            }
          },
          error: function() {
                $('#loadingSpinner').hide();
                showErrorAlert('网络错误，请稍后重试');
          }
        });
      }

    // 显示评测结果
    function displayResults(data) {
        let htmlContent = '';

        // 总体得分摘要
        let totalScore = 0;
        let validItemCount = 0;
        let categoryScores = {};

        // 计算总分和分类得分
        data.forEach(item => {
            if (!isNaN(item.score) && item.score !== null && item.score !== undefined) {
                totalScore += parseFloat(item.score);
                validItemCount++;
            }

            // 确保类别名称有效
            const categoryName = item.categoryName || '未分类';

            if (!categoryScores[categoryName]) {
                categoryScores[categoryName] = {
                    totalScore: 0,
                    count: 0
                };
            }

            if (!isNaN(item.score) && item.score !== null && item.score !== undefined) {
                categoryScores[categoryName].totalScore += parseFloat(item.score);
                categoryScores[categoryName].count += 1;
            }
        });

        // 计算平均分，避免除以零
        const avgScore = validItemCount > 0 ? (totalScore / validItemCount).toFixed(1) : '0.0';

        // 添加总分摘要卡片
        htmlContent += `
        <div class="summary-card fadeInUp" style="animation-delay: 0.3s">
            <h5 class="summary-title">测评综合得分</h5>
            <div class="summary-value">${avgScore}</div>
            <div class="summary-label">基于 ${validItemCount} 项评估指标</div>
        </div>
        `;

        // 按类别分组显示评估结果
        const categories = Object.keys(categoryScores);

        if (categories.length === 0) {
            htmlContent += `
            <div class="no-data-container fadeInUp" style="animation-delay: 0.4s">
                <i class="bi bi-clipboard-x no-data-icon"></i>
                <div class="no-data-text">暂无评测结果数据</div>
                <p class="text-muted small mt-2">当前评测周期尚无您的评测结果数据</p>
            </div>
            `;
        } else {
            categories.forEach((category, index) => {
                // 跳过空数据的类别
                if (categoryScores[category].count === 0) {
          return;
        }

                const categoryData = data.filter(item => (item.categoryName || '未分类') === category);
                const validCategoryData = categoryData.filter(item => !isNaN(item.score) && item.score !== null && item.score !== undefined);

                // 计算此类别的平均分，避免除以零
                const avgCategoryScore = categoryScores[category].count > 0
                    ? (categoryScores[category].totalScore / categoryScores[category].count).toFixed(1)
                    : '0.0';

                htmlContent += `
                <div class="card fadeInUp" style="animation-delay: ${0.4 + index * 0.1}s">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="score-indicator ${getScoreClass(avgCategoryScore)}">${avgCategoryScore}</div>
                            <div>
                                <div class="category-title">${category}
                                    <span class="category-badge ${getBadgeClass(avgCategoryScore)}">${getScoreLabel(avgCategoryScore)}</span>
                                </div>
                                <div class="category-desc">${validCategoryData.length} 项评估指标</div>
                            </div>
                        </div>

                        <div class="mt-3">
                            ${displayCategoryScores(validCategoryData)}
              </div>
              </div>
            </div>
                `;
            });
        }

        $('#resultContent').html(htmlContent);
    }

    // 显示分类下的评分项
    function displayCategoryScores(items) {
        if (!items || items.length === 0) {
            return '<div class="text-muted small">无评估数据</div>';
        }

        let html = '';
        items.forEach(item => {
            // 确保显示的评分值有效
            const score = !isNaN(item.score) && item.score !== null && item.score !== undefined
                ? item.score
                : '0';

            // 确保维度名称和项目名称有效
            const dimensionName = item.dimensionName || '未知维度';
            const itemName = item.itemName || '未知项目';

            html += `
            <div class="d-flex justify-content-between align-items-center mb-2 py-2 border-bottom">
                <div class="me-3">
                    <div class="fw-500">${dimensionName}</div>
                    <div class="small text-muted">${itemName}</div>
                </div>
                <div class="d-flex align-items-center">
                    <span class="fw-bold me-2">${score}</span>
                    <span class="badge ${getBadgeClass(score)}">${getScoreLabel(score)}</span>
                </div>
              </div>
            `;
          });

        return html;
    }

    // 根据分数获取对应的评分级别
    function getScoreLabel(score) {
        // 确保分数是有效的数字
        score = parseFloat(score);
        if (isNaN(score)) return '未评分';
        if (score >= 90) return '优秀';
        if (score >= 80) return '良好';
        if (score >= 60) return '中等';
        return '较差';
    }

    // 根据分数获取对应的CSS类名
    function getScoreClass(score) {
        // 确保分数是有效的数字
        score = parseFloat(score);
        if (isNaN(score)) return 'score-poor';
        if (score >= 90) return 'score-excellent';
        if (score >= 80) return 'score-good';
        if (score >= 60) return 'score-average';
        return 'score-poor';
    }

    // 根据分数获取对应的徽章CSS类名
    function getBadgeClass(score) {
        // 确保分数是有效的数字
        score = parseFloat(score);
        if (isNaN(score)) return 'badge-poor';
        if (score >= 90) return 'badge-excellent';
        if (score >= 80) return 'badge-good';
        if (score >= 60) return 'badge-average';
        return 'badge-poor';
    }

    // 显示无数据消息
    function showNoDataMessage() {
        $('#loadingSpinner').hide();
        const noDataHtml = $('#noDataTemplate').html();
        $('#resultContent').html(noDataHtml);
    }

    // 显示错误提示
    function showErrorAlert(message) {
        $('#loadingSpinner').hide();
        const errorHtml = $('#errorAlertTemplate').html();
        $('#resultContent').html(errorHtml);
    }
</script>
</body>
</html>
